<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/form_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:15 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>统计图表</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="../admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="../admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../admin/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="../admin/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="../admin/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="../admin/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="../admin/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="../admin/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link href="../admin/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="../admin/css/plugins/ionRangeSlider/ion.rangeSlider.css" rel="stylesheet">
    <link href="../admin/css/plugins/ionRangeSlider/ion.rangeSlider.skinFlat.css" rel="stylesheet">
    <link href="../admin/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../admin/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
    <link href="../admin/css/animate.min.css" rel="stylesheet">
    <link href="../admin/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <script src="../admin/js/jquery.min.js?v=2.1.4"></script>
    <!--<script src="../admin/js/plugins/echarts/echarts-all.js"></script>-->
    <script src="../admin/js/plugins/echarts/echarts.js"></script>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-5">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <input type="checkbox" class="js-switch" checked />
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="row">
        <div class="col-sm-12">
            <div id="statistic_chart" style="width: 800px;height:600px;">

            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function() {
        $(".js-switch").change(function () {
                if ($(this).is(':checked')) {
                    //$("#charSelecte").css("display", "block");
                    $("#file-pretty").css("display", "none");
                    getResultData();
                } else {
                    //$("#charSelecte").css("display", "none");
                    $("#file-pretty").css("display", "block");
                    getResultData();
                }
            }
        )
        getResultData();
        }
    )

   var app = {};
    var resultData=[];
    function getResultData() {
        resultData=[];
        $.ajax({
            type: 'post',
            async: false,
            url: "/student/getAll.controller",
            data: {},
            dataType: 'json',
            success: function (data) {
                debugger;
                // if (!data || data.length < 1) {
                //     alert("无数据");
                //     return false;
                // }
                if($(".js-switch").is(':checked')){
                    $.each(data, function (index, value) {
                        if(!value.uploadFlag || parseInt(value.uploadFlag)!=1){
                            resultData.push(value)
                        }
                    })
                }else {
                    $.each(data, function (index, value) {
                        if (value.uploadFlag == "1" || value.uploadFlag == 1) {
                            resultData.push(value)
                        }
                    })
                }

            },
            error:function (e) {
                console.error(e);
                alert("获取数据出错");
            }
        });
        getCustomizedPie();
    }

    //南丁格尔图
    function getCustomizedPie() {
        var dom = document.getElementById("statistic_chart");
        var myChart = echarts.init(dom);
        option = null;
        var nameArray = new Array();
        //var totalScoreArray = new Array();
        var dataArray = new Array();
        var hasName = false;
        $.each(resultData, function (index, value) {
            hasName = false;
            $.each(nameArray, function (index2, value2) {
                if (value.name == value2) {
                    hasName = true;
                    return false;
                }
            })
            if (hasName) {
                return true;
            }
            nameArray.push(value.name);
            var item = {};
            item.value = value.totalScore;
            item.name = value.name;
            dataArray.push(item);
            //totalScoreArray.push(value.totalScore);
        });
        option = {
            backgroundColor: '#2c343c',
            title: {
                text: 'Customized Pie',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name: '成绩',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data: dataArray.sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }
</script>
<script src="../admin/js/bootstrap.min.js?v=3.3.6"></script>
<script src="../admin/js/content.min.js?v=1.0.0"></script>
<script src="../admin/js/plugins/chosen/chosen.jquery.js"></script>
<script src="../admin/js/plugins/jsKnob/jquery.knob.js"></script>
<script src="../admin/js/plugins/jasny/jasny-bootstrap.min.js"></script>
<script src="../admin/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="../admin/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
<script src="../admin/js/plugins/nouslider/jquery.nouislider.min.js"></script>
<script src="../admin/js/plugins/switchery/switchery.js"></script>
<script src="../admin/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
<script src="../admin/js/plugins/iCheck/icheck.min.js"></script>
<script src="../admin/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../admin/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<script src="../admin/js/plugins/clockpicker/clockpicker.js"></script>
<script src="../admin/js/plugins/cropper/cropper.min.js"></script>
<script src="../admin/js/demo/form-advanced-demo.min.js"></script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
</html>
